<template>
  <div class=''>
    <el-dialog title="提示" :visible.sync="AlarmDialogVisible" width="600px" :before-close="closeAddDialog"
      :close-on-click-modal="false" :modal="false" top="30vh">

      <div style="display: flex;">

        <div style="padding-left: 20px;flex: 1;">

          <div style="
              display: flex;
              align-items: center;
              color: #df250b;
              font-size: 17px;font-weight: 600;
            ">
            <el-image :src="gjtc" style="width: 22px; height: 22px; margin-right: 7px"></el-image>
            <span>{{ dialogAlarmInfo.alarmType | alarmTypeText }}</span>
          </div>

          <div style="margin-top: 14px; font-size: 20px; color: #ffffff">
            {{ dialogAlarmInfo.orgName }}
          </div>
          <div style="margin-top: 15px; color: #ffffff">
            <span style="color: #bdbdbd">告警设备：</span>
            <span v-if="dialogAlarmInfo.deviceType == 'DoorMagnetism'">门磁</span>
            <span v-else-if="dialogAlarmInfo.deviceType == 'Camera'">摄像机</span>
            <span v-else-if="dialogAlarmInfo.deviceType == 'GasSensor'">燃气</span>
            <span v-else-if="dialogAlarmInfo.deviceType == 'Infrared'">红外</span>
            <span v-else-if="dialogAlarmInfo.deviceType == 'SmokeAlarm'">烟感</span>
            <span v-else-if="dialogAlarmInfo.deviceType == 'FireHydrant'">消防水压</span>
          </div>
          <div style="margin-top: 10px; color: #ffffff">
            <span style="color: #bdbdbd">设备编码：</span>{{ dialogAlarmInfo.imei }}
          </div>
          <div style="margin-top: 10px; color: #ffffff">
            <span style="color: #bdbdbd">产品型号：</span>{{ dialogAlarmInfo.classMark }}
          </div>
          <div style="margin-top: 10px; color: #ffffff">
            <span style="color: #bdbdbd">告警位置：</span>{{ dialogAlarmInfo.name }}
          </div>
          <div style="margin-top: 10px; color: #ffffff">
            <span style="color: #bdbdbd">详细地址：</span>{{ dialogAlarmInfo.address }}
          </div>
          <div style="margin-top: 10px; color: #ffffff">
            <span style="color: #bdbdbd">告警时间：</span>{{ dialogAlarmInfo.createTime }}
          </div>

          <div @click="clickresponder" style="background-color: #000F4A;color: #fff;border: 1px solid #00EDFE;border-radius: 5px;
                    padding: 5px 30px;margin-top: 10px;font-size: 12px;cursor: pointer;width: 23%;">查看接警人</div>
          <!-- <div style="margin-top: 10px; color: #ffffff" v-for="(item, index) in targelist" :key="index">
                        <span style="color: #bdbdbd">接警人{{ index + 1 }}：</span>{{ item.name }}：{{ item.mobile }}
                    </div> -->

          <div style="margin-top: 15px; color: #ffffff;display: flex;font-size: 12px;">
            <div style="background-color: #000F4A;padding: 5px 30px;border-radius: 5px;cursor: pointer;"
              @click="closeAddDialog">关 闭</div>
            <div
              style="background-color: #00EDFE;padding: 5px 30px;border-radius: 5px;color: #000F4A;margin-left: 50px;cursor: pointer;"
              @click="Alarmchuli" v-if="dialogAlarmInfo.status != '3'">处 理</div>
          </div>

        </div>

        <div style="flex: 1;display: flex;flex-direction: column;align-items: center;margin-left: 15px;">
          <div style="background: #172665;width: 90%;height: 150px;display: flex;align-items: center;position: relative;cursor: pointer;" @click="clickIchnography">
            <el-image class="elImage" :src="img"></el-image>
            <i class="el-icon-location icon" :style="'top:' + item.top + 'px;' + 'left:' + item.left + 'px;'"
              v-for="(item, index) in markVOList" :key="index" :class="iconclass(item)">
            </i>
          </div>

          <!-- <div @click="clickIchnography" style="background-color: #000F4A;color: #fff;border: 1px solid #00EDFE;border-radius: 5px;
                    padding: 5px 30px;margin-top: 10px;font-size: 12px;cursor: pointer;">查看平面图</div> -->

          <!-- <div @click="clickresponder" style="background-color: #000F4A;color: #fff;border: 1px solid #00EDFE;border-radius: 5px;
                    padding: 5px 30px;margin-top: 10px;font-size: 12px;cursor: pointer;">查看接警人</div> -->


          <div style="background: #172665;width: 90%;height: 150px;display: flex;align-items: center;margin-top: 10px;"
            v-if="list.length > 0">
            <el-carousel trigger="click" height="150px" style="width: 100%;" :autoplay="false" arrow="always">
              <el-carousel-item v-for="(item, index) in list" :key="index">
                <el-image class="elImage" style="height: 150px;cursor: pointer;" :src="img2"
                  @click="handleClickCamera(item)"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>

          <div @click="onvideoList" style="background-color: #000F4A;color: #fff;border: 1px solid #00EDFE;border-radius: 5px;
                    padding: 5px 30px;margin-top: 10px;font-size: 12px;cursor: pointer;" v-if="list.length > 0">实时监控</div>

          <div @click="onplayback" style="background-color: #000F4A;color: #fff;border: 1px solid #00EDFE;border-radius: 5px;
                    padding: 5px 30px;margin-top: 10px;font-size: 12px;cursor: pointer;" v-if="alarmPlayFlag">告警回放
          </div>

        </div>

      </div>

      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="AlarmDialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="Alarmchuli" size="mini">处 理</el-button>
      </span> -->
    </el-dialog>

    <Ichnography ref="refIchnography"></Ichnography>
    <rightResponder ref="refrightResponder" :targelist="targelist"></rightResponder>
    <WarnHandle :alarmInfo="alarmInfo" ref="refWarnHandle" v-on="$listeners"></WarnHandle>
    <liveStreaming ref="refliveStreaming"></liveStreaming>
    <liveMacrovision ref="refliveMacrovision"></liveMacrovision>
    <playback ref="refplayback" :alarmPlayList="alarmPlayList"></playback>
    <videoList ref="refvideoList" :videoArr="videoArr"></videoList>
  </div>
</template>

<script>
import { reqFloorById, reqGetByTargetId, reqGetCamera, reqGetMark, reqAlarmPlay } from "@api/api.js";
import Ichnography from "../components/Ichnography.vue"
import rightResponder from "../components/rightResponder.vue"
import WarnHandle from "./WarnHandle.vue";
import liveStreaming from "./liveStreaming.vue";//萤石云
import liveMacrovision from "./liveMacrovision.vue";//宏视
import playback from "./playback.vue";//回放
import videoList from "./videoList.vue";//宏视视频列表

export default {
  props: ['dialogAlarmInfo', 'isVoice'],
  components: {
    Ichnography,
    WarnHandle,
    rightResponder,
    liveStreaming,
    liveMacrovision,
    playback,
    videoList
  },
  // 定义属性
  data() {
    return {
      AlarmDialogVisible: false,
      gjtc: require("@assets/images/datav/gjtc.png"),
      img: require("@assets/images/xiaofang.png"),
      img2: require("@assets/images/sxt.jpeg"),
      alarmInfo: "", //告警处理所需信息
      targelist: [],
      list: [],
      left: 0,
      top: 0,
      markVOList: [],
      alarmPlayFlag: false,
      alarmPlayList: [],
      videoArr:[]
    }
  },
  computed: {
  },
  watch: {},
  methods: {
    // 安装点查询摄像头
    async GetCamera(spaceId) {
      let res = await reqGetCamera(spaceId);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res,"res");
      this.list = res.data.row || [];
      // this.list = this.list.filter(item => item.manufacturerId == '1660554046491635714' || item.classMark == 'V380')//只添加萤石云设备 ||宏视
      this.list = this.list.filter(item => item.classMark == 'V380')//只添加宏视
      //   this.gettoken()
    },
    // 获取token
    gettoken() {
      fetch(`https://open.ys7.com/api/lapp/token/get?appKey=d6a1a4287b9a4d78adebaa7bbc8c7125&appSecret=6b9102e6b4ef80beb7067be13d08bd2c`, {
        method: "POST",
      })
        .then(response => response.json())
        .then(res => {
          // console.log(res);
          // this.accessToken = res.data.accessToken;
          this.getCapture(res.data.accessToken) // 设备抓拍图片
        });
    },
    // 设备抓拍图片
    getCapture(accessToken) {
      fetch(`https://open.ys7.com/api/lapp/device/capture?accessToken=${accessToken}&deviceSerial=33010468992637119318:33010344991327006295&channelNo=1`, {
        method: "POST",
      })
        .then(response => response.json())
        .then(res => {
          console.log(res);
        });
    },
    // 摄像头弹窗
    handleClickCamera(e) {
      this.getVoice()
      console.log(e);
      if (e.classMark == 'V380') {
        // 宏视
        this.$refs.refliveMacrovision.dialogVisible = true;
        this.$refs.refliveMacrovision.init(e.deviceId)
        this.$refs.refliveMacrovision.getAlarmPlay(e.id)//告警id查询告警视频列表
      } else {
        // 萤石云
        this.$refs.refliveStreaming.dialogVisible = true;
        this.$refs.refliveStreaming.gettoken(e)
      }
    },
    // 安装点id获取接警人列表
    async getByTargetId(spaceId) {
      let res = await reqGetByTargetId(spaceId);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      //   console.log(res);
      this.targelist = res.data.rows || [];
    },
    // 标记点颜色
    iconclass(e) {
      // console.log(e);
      if (e.isAlarm == 1) {
        return "hon";
      }
      if (e.online == 0) {
        return "lixian";
      }
    },
    //获取平面图设备标点
    async getgetMark(spaceId) {
      const res = await reqGetMark(1,99,{
        floorId: spaceId,
      });
      this.markVOList = res.data.row.markVOList || [];
      if (this.markVOList.length == 0) return;
      this.markVOList = this.markVOList.filter((item) => item.mark != "");
      this.markVOList.forEach((item) => {
        item.left = ((item.mark.slice(0, item.mark.indexOf(","))) / 3.38).toFixed(2);
        item.top = ((item.mark.slice(item.mark.indexOf(",") + 1)) / 3.54).toFixed(2);
      });
      // console.log(this.markVOList);
    },
    async getFloorById(spaceId) {
      // 查询平面图
      const res = await reqFloorById(spaceId);
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      if (res.data.rows.image == '') return;
      this.img = res.data.rows.image
    },
    // 查看平面图
    async clickIchnography() {
      this.getVoice()
      const res = await reqFloorById(this.dialogAlarmInfo.spaceId);
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      if (res.data.rows.image == '') return this.$modal.notifyWarning('当前楼层暂无平面图,请上传后操作!');
      this.$refs.refIchnography.dialogVisible = true;
      this.$refs.refIchnography.getimage(res.data.rows.image)
      this.$refs.refIchnography.getGetMark(this.dialogAlarmInfo.spaceId)
    },
    clickresponder() {
      this.getVoice()
      this.$refs.refrightResponder.dialogVisible = true;
    },

    Alarmchuli() {
      this.getVoice()
      this.$parent.flag = false;
      this.$refs.refWarnHandle.dialogVisible = true;
      this.alarmInfo = JSON.parse(JSON.stringify(this.dialogAlarmInfo));
    },

    closeAddDialog() {
      this.getVoice()
      this.AlarmDialogVisible = false;
      this.alarmPlayFlag = false;
      this.$emit("clickflag")
    },
    getVoice() {
      if (this.isVoice) {
        this.$parent.pauseAudio()   // 停止铃声
      }
    },
    // 告警id查询告警视频列表回放
    async getAlarmPlay(id) {
      const res = await reqAlarmPlay(id);
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      if (res.data.row.length == 0) {
        this.alarmPlayFlag = false;
        return;
      }
      this.alarmPlayFlag = true;
      // this.alarmPlayList=res.data.row;
      this.alarmPlayList = JSON.parse(JSON.stringify(res.data.row));
    },
    onplayback() {
      this.$refs.refplayback.dialogPlayback = true;
    },
    onvideoList() {
      // this.videoArr=JSON.parse(JSON.stringify(this.list))
      // console.log(this.videoArr);
      // console.log(this.list);
      // this.$refs.refvideoList.dialogVisible = true;
      // this.$refs.refvideoList.init(1)
    },
  },
  created() {

  },
  mounted() {

  }
}
</script>

<style lang='less' scoped>
::v-deep .el-carousel__indicators--horizontal {
  display: none; //隐藏指示器
}

::v-deep .el-carousel__arrow {
  background-color: rgba(31, 45, 61, 0.44) !important;
}

.icon {
  position: absolute;
  color: #28c76f;
  font-size: 12px;
}

.hon {
  color: #f84242;
}

.lixian {
  color: #90a4ae;
}

::v-deep .el-dialog__body {
  padding: 30px 20px 20px;
}
</style>